<template>
	<view class="container">
		<!-- 报装 -->
		<uni-card>
			<u-form :model="params" ref="uForm" :rules="rules">
				<u-steps direction="column" dot>
					<u-steps-item title="公司名称">
						<text class="slot-icon" slot="icon">
							<u-icon name="account-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="company" ref="item1">
								<u--input disabled border="bottom" v-model="params.company"></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="申报人">
						<text class="slot-icon" slot="icon">
							<u-icon name="account-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="apply_by" ref="item1">
								<u--input disabled border="bottom" v-model="params.apply_by"></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<!-- <u-steps-item title="报装地址">
						<text class="slot-icon" slot="icon">
							<u-icon name="map-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="apply_address" ref="item1">
								<u--input border="bottom" v-model="params.apply_address"></u--input>
							</u-form-item>
						</template>
					</u-steps-item> -->
					<u-steps-item title="申报人电话">
						<text class="slot-icon" slot="icon">
							<u-icon name="phone-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="apply_phone" ref="item1">
								<u--input disabled border="bottom" v-model="params.apply_phone" maxlength='11'></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="申报时间">
						<text class="slot-icon" slot="icon">
							<u-icon name="clock-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="add_time" ref="item1">
								<uni-datetime-picker type="datetime" :clear-icon="false" v-model="params.add_time"
									@change="timeChange" @maskClick="maskClick" />
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="营业执照">
						<text class="slot-icon" slot="icon">
							<u-icon name="calendar-fill"></u-icon>
						</text>
						<template slot="desc">
							<span style="color: red; font-size: 16rpx;">*请上传《营业执照》电子扫描件，最多可上传2张</span>
							<!-- <uni-file-picker v-model="documentArray[0].data" limit="2" @select="select"
								@delete="deleteChange" @success="success" file-mediatype="all" title="最多选择2个文件"></uni-file-picker> -->
							<u-form-item prop="business_license" ref="item1">
								<u-upload :fileList="documentArray[0].data" @afterRead="afterRead" @delete="deletePic"
									name="1" multiple :maxCount="2"></u-upload>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="身份证(法人身份证)">
						<text class="slot-icon" slot="icon">
							<u-icon name="coupon-fill"></u-icon>
						</text>
						<template slot="desc">
							<span style="color: red; font-size: 16rpx;">*请上传《身份证(法人身份证)》正反面电子扫描件，最多可上传2张</span>
							<!-- <uni-file-picker v-model="documentArray[1].data" limit="2" @select="select1"
								file-mediatype="all" title="最多选择2个文件"></uni-file-picker> -->
							<u-form-item prop="id_card" ref="item1">
								<u-upload :fileList="documentArray[1].data" @afterRead="afterRead1" @delete="deletePic1"
									name="1" multiple :maxCount="2"></u-upload>
							</u-form-item>

						</template>
					</u-steps-item><u-steps-item title="授权委托书">
						<text class="slot-icon" slot="icon">
							<u-icon name="order"></u-icon>
						</text>
						<template slot="desc">
							<span style="color: red; font-size: 16rpx;">*请上传《授权委托书》电子扫描件，最多可上传10张</span>
							<!-- <uni-file-picker v-model="documentArray[2].data" limit="2" @select="select2"
								file-mediatype="all" title="最多选择2个文件"></uni-file-picker> -->
							<u-form-item prop="power_of_attorney" ref="item1">
								<u-upload :fileList="documentArray[2].data" @afterRead="afterRead2" @delete="deletePic2"
									name="1" multiple :maxCount="10"></u-upload>
							</u-form-item>

						</template>
					</u-steps-item>
					<u-steps-item title="岚县经开区供水中心报装申请表">
						<text class="slot-icon" slot="icon">
							<u-icon name="file-text-fill"></u-icon>
						</text>
						<template slot="desc">
							<span style="color: red; font-size: 16rpx;">*请上传《岚县经开区供水中心报装申请表》电子扫描件，最多可上传10张</span>
							<!-- <uni-file-picker v-model="documentArray[3].data" limit="5" @select="select3"
								file-mediatype="all" title="最多选择5个文件"></uni-file-picker> -->
							<u-form-item prop="apply_table" ref="item1">
								<u-upload :fileList="documentArray[3].data" @afterRead="afterRead3" @delete="deletePic3"
									name="1" multiple :maxCount="10"></u-upload>
							</u-form-item>

						</template>
					</u-steps-item>
					<u-steps-item title="合法持有土地的证明性文件复印件">
						<text class="slot-icon" slot="icon">
							<u-icon name="bookmark-fill"></u-icon>
						</text>
						<template slot="desc">
							<span style="color: red; font-size: 16rpx;">*请上传《合法持有土地的证明性文件复印件》电子扫描件，最多可上传10张</span>
							<!-- <uni-file-picker v-model="documentArray[4].data" limit="5" @select="select4"
								file-mediatype="all" title="最多选择5个文件"></uni-file-picker> -->
							<u-form-item prop="documentation" ref="item1">
								<u-upload :fileList="documentArray[4].data" @afterRead="afterRead4" @delete="deletePic4"
									name="1" multiple :maxCount="10"></u-upload>
							</u-form-item>

						</template>
					</u-steps-item>
				</u-steps>
				<u-form-item style="margin-top: 10rpx;">
					<u-button style="width:60%;" type="primary" shape="circle" text="申请提交" @click="submit"></u-button>
				</u-form-item>
			</u-form>
		</uni-card>
	</view>
</template>

<script>
	import {
		addReportInstallation
	} from '@/api/applyForInstallation.js'
	export default {
		data() {
			return {
				params: {
					company: '', //公司名称
					apply_by: '', //用户名
					// apply_address: '', //地址
					apply_phone: '', //手机号
					add_time: '', //时间
					business_license: '', //营业执照
					id_card: '', //法人身份证
					power_of_attorney: '', //授权委托书
					documentation: '', //合法持有土地的证明性文件复印件
					apply_table: '' //岚县经开区供水中心报装申请表
				},
				// 图片
				// 处理
				selectdata: [{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					}, {
						data: []
					}
				],
				//图片暂存
				/**
				 * 0:营业执照
				 * 1:身份证(法人身份证)
				 * 2:授权委托书
				 * 3:岚县经开区供水中心报装申请表
				 * 4:合法持有土地的证明性文件复印件
				 */
				// 回显
				documentArray: [{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					}, {
						data: []
					},
				],
				// 验证
				rules: {
					company: [{
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					}],
					apply_by: [{
						type: 'string',
						required: true,
						message: '请填写申请人',
						trigger: ['blur', 'change']
					}],
					// apply_address: [{
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写地址',
					// 	trigger: ['blur', 'change']
					// }],
					add_time: [{
						type: 'string',
						required: true,
						message: '请选择申报日期',
						trigger: ['blur', 'change']
					}],
					apply_phone: [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					business_license: [{
						type: 'string',
						required: true,
						message: '请提交相关材料',
						trigger: ['blur', 'change']
					}],
					id_card: [{
						type: 'string',
						required: true,
						message: '请提交相关材料',
						trigger: ['blur', 'change']
					}],
					power_of_attorney: [{
						type: 'string',
						required: true,
						message: '请提交相关材料',
						trigger: ['blur', 'change']
					}],
					documentation: [{
						type: 'string',
						required: true,
						message: '请提交相关材料',
						trigger: ['blur', 'change']
					}],
					apply_table: [{
						type: 'string',
						required: true,
						message: '请提交相关材料',
						trigger: ['blur', 'change']
					}],

				},

			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '申请报装'
			});
			// 用于在页面或组件加载完成后执行一些初始化操作。它会在页面或组件首次加载完成后被调用，并且只会被调用一次。
			//onReady 为uni-app支持的生命周期之一
		},
		onLoad() {
			let that = this
			let CompanyDropDownBox1 = that.$store.state.CompanyDropDownBox1 //通过全局状态管理vuex中或区公司字典
			uni.getStorage({
				key: 'userInfo',
				complete(res) {
					console.log('res', res)
					console.log(res.data.people_name)
					// 获取到公司字典通过find()函数查找dept_id相同的公司名称赋值给company
					let company = CompanyDropDownBox1.find(element => element.value == res.data.dept_id)
					if(company){
						that.$set(that.params, 'company', company.text)
					}
					that.$set(that.params, 'apply_by', res.data.nick_name)
					// that.$set(that.params, 'apply_address', res.data.address)
					that.$set(that.params, 'apply_phone', res.data.phonenumber)
				}
			})
			console.log('this.params', this.params)
		},
		methods: {
			/**
			 * 立即提交
			 */
			submit() {
				let _this = this
				this.$refs.uForm.validate().then(res => {
					console.log('then', this.params)
					addReportInstallation(_this.params).then(result => {
						console.log('申报提交', result)
						if (result.data == 'success') {
							uni.showModal({
								title: '提交成功！',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						} else {
							uni.showModal({
								title: '申请失败，请重新填写信息！',
								showCancel: false,
							})
						}
					})

				}).catch(res => {
					console.log('catch', this.params)
				})



			},
			// deleteChange(event) {
			// 	console.log('文件删除', event)
			// 	let _this = this
			// 	console.log('_this.selectdata',_this.documentArray)
			// 	_this.selectdata[0].data.splice(event.index,1)
			// 	console.log('_this.selectdata[0].data',_this.selectdata[0].data)
			// },
			// 选择文件后触发
			// 营业执照
			// select(e) {
			// 	console.log('选择文件:', e)
			// 	let _this = this
			// 	uni.uploadFile({
			// 		url: 'https://lxsw.pcippc.com/api/water/savePicture',
			// 		filePath: e.tempFiles[0].path,
			// 		name: 'file',
			// 		formData: {
			// 			user: 'test'
			// 		},
			// 		success(res) {
			// 			let result = JSON.parse(res.data)
			// 			console.log('文件上传成功!', result)
			// 			_this.selectdata[0].data.push(result.fileName)
			// 		},
			// 		fail(reject) {
			// 			console.log('文件上传失败!', res)
			// 		}
			// 	})
			// },
			// // 身份证
			// select1(e) {

			// },
			// // 授权委托书
			// select2(e) {},
			// // 岚县经开区供水中心报装申请表
			// select3(e) {

			// },
			// // 合法持有土地的证明性文件复印件
			// select4(e) {

			// },
			// 申报时间change事件
			timeChange(value) {
				console.log('timeChange', value)
				this.params.apply_time = value
			},
			// 
			/**
			 * 图片上传
			 */
			// -------------------------------------------------------------------营业执照------------------------------------------------------
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.documentArray[0].data.length
				lists.map((item) => {
					this.documentArray[0].data.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, 0)
					let item = this.documentArray[0].data[fileListLen]
					this.documentArray[0].data.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				console.log('删除图片', event)
				this.documentArray[0].data.splice(event.index, 1)
				this.selectdata[0].data.splice(event.index, 1)
				this.params.business_license = this.selectdata[0].data.join(',')
				console.log('营业执照删除', this.selectdata)
			},
			// .......................................................身份证上传删除...............................................................
			async afterRead1(event) {
				console.log('身份证上传event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.documentArray[1].data.length
				lists.map((item) => {
					this.documentArray[1].data.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, 1)
					let item = this.documentArray[1].data[fileListLen]
					this.documentArray[1].data.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic1(event) {
				this.documentArray[1].data.splice(event.index, 1)
				this.selectdata[1].data.splice(event.index, 1)
				this.params.id_card = this.selectdata[1].data.join(',')
				console.log('身份证上传', this.selectdata)
			},
			// ---------------------------------------------------授权委托书----------------------------------------------------------------
			async afterRead2(event) {
				console.log('授权委托书event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.documentArray[2].data.length
				lists.map((item) => {
					this.documentArray[2].data.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, 2)
					let item = this.documentArray[2].data[fileListLen]
					this.documentArray[2].data.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic2(event) {
				console.log('删除图片', event)
				this.documentArray[2].data.splice(event.index, 1)
				this.selectdata[2].data.splice(event.index, 1)
				this.params.power_of_attorney = this.selectdata[2].data.join(',')
				console.log('deletePic', this.selectdata)
			},
			// -----------------------------------------岚县经开区供水中心报装申请表-----------------------------------------
			async afterRead3(event) {
				console.log('岚县经开区供水中心报装申请表event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.documentArray[3].data.length
				lists.map((item) => {
					this.documentArray[3].data.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, 3)
					let item = this.documentArray[3].data[fileListLen]
					this.documentArray[3].data.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic3(event) {
				this.documentArray[3].data.splice(event.index, 1)
				this.selectdata[3].data.splice(event.index, 1)
				this.params.apply_table = this.selectdata[3].data.join(',')
				console.log('岚县经开区供水中心报装申请表', this.selectdata)
			},
			// ---------------------------------------合法持有土地的证明性文件复印件----------------------------------------
			async afterRead4(event) {
				console.log('合法持有土地的证明性文件复印件event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.documentArray[4].data.length
				lists.map((item) => {
					this.documentArray[4].data.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, 4)
					let item = this.documentArray[4].data[fileListLen]
					this.documentArray[4].data.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic4(event) {
				console.log('删除图片', event)
				this.documentArray[4].data.splice(event.index, 1)
				this.selectdata[4].data.splice(event.index, 1)
				this.params.documentation = this.selectdata[4].data.join(',')
				console.log('合法持有土地的证明性文件复印件删除', this.selectdata)
			},



			uploadFilePromise(url, index) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						url: 'https://lxsw.pcippc.com/api/water/savePicture', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let result = JSON.parse(res.data)
							this.selectdata[index].data.push(result.fileName)
							switch (index) {
								case 0:
									this.params.business_license = this.selectdata[index].data.join(',')
									break;
								case 1:
									this.params.id_card = this.selectdata[index].data.join(',')
									break;
								case 2:
									this.params.power_of_attorney = this.selectdata[index].data.join(',')
									break;
								case 3:
									this.params.apply_table = this.selectdata[index].data.join(',')
									break;
								case 4:
									this.params.documentation = this.selectdata[index].data.join(',')
									break;
							}
							console.log('result', this.selectdata)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						},
						fail: (res) => {
							console.log('图片上传失败', res)
						}
					});
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
</style>